<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-select v-model="selectValue" clearable placeholder="请选择" style="width: 110px;">
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input
            style="width: 130px;margin-left: 10px;"
            placeholder="请输入内容"
            v-model="selectInput"
            clearable>
          </el-input>
          <el-button plain style="margin-left: 10px;" @click="select">搜索</el-button>
          <el-dialog title="搜索结果" :visible.sync="dialogTableVisible" width="800px">
            <el-table :data="myselect">
              <el-table-column width="100" property="id" label="菜品编号"></el-table-column>-->
              <el-table-column width="150" property="name" label="菜品名称"></el-table-column>
              <el-table-column width="100" property="price" label="菜品价格"></el-table-column>
              <el-table-column width="100" property="cpTypeEntity.name" label="菜品类型"></el-table-column>
              <el-table-column
                label="菜品图片"
                width="150">
                <template slot-scope="scope">
                  <img :src="scope.row.imgSrc" style="width: 100px;height: 50px" alt="">
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button-group>
                    <el-button @click="handleEdit(scope.$index, scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button>
                    <el-button @click="handleDelete(scope.$index, scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
          </el-dialog>
        </div>
      </el-col>
      <el-col :span="6" :offset="6">
        <div class="grid-content bg-purple">
          <el-button plain @click="addDish">添加</el-button>
          <el-dialog title="添加菜品" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="菜品名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="菜品价格" :label-width="formLabelWidth">
                <el-input v-model="form.price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="菜品类型" :label-width="formLabelWidth">
                <el-select v-model="form.classify" placeholder="请选择角色">
                  <el-option
                    v-for="item in classifyTableData"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
              <input accept="image/*" name="img" @change="update" id="upload_file" type="file">
<!--              <el-form-item label="菜品图片" :label-width="formLabelWidth">-->
<!--                <el-input type="file" @change="update" accept="image/*" multiple class="image_file"></el-input>-->
<!--                <el-upload-->
<!--                  class="upload-demo"-->
<!--                  action="http://39.105.188.201:8080/"-->
<!--                  :on-preview="handlePreview"-->
<!--                  :on-remove="handleRemove"-->
<!--                  :before-remove="beforeRemove"-->
<!--                  multiple-->
<!--                  :limit="3"-->
<!--                  :on-exceed="handleExceed"-->
<!--                  :file-list="fileList">-->
<!--                  <el-button size="small" type="primary">点击上传</el-button>-->
<!--                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
<!--                </el-upload>-->
<!--              </el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveAddDishes">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <DishesTable></DishesTable>
    </el-row>
  </div>
</template>

<script>
  import DishesTable from './DishesTable'
  import {mapActions,mapState} from 'vuex'
  import * as url from '../../../api/lypApi'
    export default {
        name: "Dishesset",
        components:{
            DishesTable
        },
        data(){
            return{
                fileList: [

                    ],
                selectOptions: [
                    {
                    value: 'id',
                    label: '菜品编号'
                }, {
                    value: 'name',
                    label: '菜品名称'
                }, {
                    value: 'price',
                    label: '菜品价格'
                }, {
                    value: 'classify',
                    label: '菜品类型'
                }
                ],
                selectValue: '',
                selectInput:'',
                myselect:[],
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                    price: '',
                    classify: '',
                    file:{}
                },
                formLabelWidth: '120px',
                classifyTableData:[],
                param:{}
            }
        },
        methods:{
            update (e) {   // 上传照片
                console.log(e)
                let file = e.target.files[0]
                this.form.file=file
                this.param = new FormData()  // 创建form对象
                this.param.append('file', file)  // 通过append向form对象添加数据
                this.param.append('name', this.form.name) // 添加form表单中其他数据
                this.param.append('price', this.form.price) // 添加form表单中其他数据
                this.param.append('classify', this.form.classify) // 添加form表单中其他数据
                console.log(this.param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
                console.log(this.param)
            },
            saveAddDishes(){
                this.dialogFormVisible = false
                console.log(this.form)
                this.$axios({
                    url:`/lypApi${url.ADDDISHES}`,
                    method:'post',
                    data:this.form,
                    headers: {'Content-Type': 'multipart/form-data'}
                }).then(res=>{
                    console.log(res)
                }).catch(err=>{
                    console.log(err)
                })
            },
            addDish(){
                this.dialogFormVisible = true
                console.log(this.classifyTableData)
            },
            ...mapActions(['selectData']),
            select(){
                this.dialogTableVisible = true
                //this.$store.dispatch('selectData',[this.selectValue,this.selectInput])
                this.selectData([this.selectValue,this.selectInput]).then(res=>{
                    console.log(res)
                    this.myselect=res
                })

            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(row.id);
                this.$store.dispatch('deleteData',row)
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            }

        },
        created(){
            this.$axios({
                url:'/lypApi'+url.GETCLASSIFY,
                method:"post",
            }).then(res=>{
                console.log(res)
                this.classifyTableData=res.data.list
            }).catch(err=>{
                console.log(err)
            })
        }
    }
</script>

<style scoped lang="less">
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple {
    /*border: 1px solid rebeccapurple;*/
    background: rgba(255, 255, 255, 0);
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
.el-message-box{
  height: 200px;
}
</style>
